<%--
  Created by IntelliJ IDEA.
  User: Lenovo
  Date: 2025/5/27
  Time: 15:50
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>书影音世界 - 发现好内容</title>
    <link rel="stylesheet" href="./css/MainPageCss.css">
</head>
<body>
<!-- 顶部导航栏 -->
<header class="header">
    <div class="nav-container">
        <div class="logo">书影音世界</div>
        <div class="nav-links">
            <a href="#">首页</a>
            <a href="#">电影</a>
            <a href="#">图书</a>
            <a href="#">音乐</a>
            <a href="#">小组</a>
            <a href="#">同城</a>
        </div>
        <div class="search-box">
            <input type="text" placeholder="搜索电影、图书、音乐...">
            <button>搜索</button>
        </div>
    </div>
</header>

<!-- 主要内容区 -->
<div class="main-container">
    <!-- 左侧内容 -->
    <div class="content-left">
        <h2 class="section-title">热门电影</h2>
        <div class="movie-grid">
            <div class="movie-card">
                <img src="https://img.shetu66.com/2023/04/25/1682410853619598.png" alt="电影海报" class="movie-poster">
                <div class="movie-title">奥本海默</div>
                <div class="movie-rating">★★★★☆ 8.8</div>
            </div>
            <div class="movie-card">
                <img src="https://img.shetu66.com/2023/04/25/1682410853619598.png" alt="电影海报" class="movie-poster">
                <div class="movie-title">流浪地球2</div>
                <div class="movie-rating">★★★★☆ 8.3</div>
            </div>
            <div class="movie-card">
                <img src="https://img.shetu66.com/2023/04/25/1682410853619598.png" alt="电影海报" class="movie-poster">
                <div class="movie-title">封神第一部</div>
                <div class="movie-rating">★★★★☆ 7.9</div>
            </div>
            <div class="movie-card">
                <img src="https://img.shetu66.com/2023/04/25/1682410853619598.png" alt="电影海报" class="movie-poster">
                <div class="movie-title">消失的她</div>
                <div class="movie-rating">★★★☆☆ 6.4</div>
            </div>
            <div class="movie-card">
                <img src="https://img.shetu66.com/2023/04/25/1682410853619598.png" alt="电影海报" class="movie-poster">
                <div class="movie-title">满江红</div>
                <div class="movie-rating">★★★☆☆ 7.0</div>
            </div>
            <div class="movie-card">
                <img src="https://img.shetu66.com/2023/04/25/1682410853619598.png" alt="电影海报" class="movie-poster">
                <div class="movie-title">八角笼中</div>
                <div class="movie-rating">★★★★☆ 7.5</div>
            </div>
            <div class="movie-card">
                <img src="https://img.shetu66.com/2023/04/25/1682410853619598.png" alt="电影海报" class="movie-poster">
                <div class="movie-title">长安三万里</div>
                <div class="movie-rating">★★★★☆ 8.3</div>
            </div>
            <div class="movie-card">
                <img src="https://img.shetu66.com/2023/04/25/1682410853619598.png" alt="电影海报" class="movie-poster">
                <div class="movie-title">孤注一掷</div>
                <div class="movie-rating">★★★★☆ 6.9</div>
            </div>
        </div>

        <h2 class="section-title" style="margin-top: 30px;">新书速递</h2>
        <div class="movie-grid">
            <div class="movie-card">
                <img src="https://img.shetu66.com/2023/04/25/1682410853619598.png" alt="电影海报" class="movie-poster">
                <div class="movie-title">太白金星有点烦</div>
                <div class="movie-rating">★★★★☆ 8.1</div>
            </div>
            <div class="movie-card">
                <img src="https://img.shetu66.com/2023/04/25/1682410853619598.png" alt="电影海报" class="movie-poster">
                <div class="movie-title">我与地坛</div>
                <div class="movie-rating">★★★★★ 9.3</div>
            </div>
            <div class="movie-card">
                <img src="https://img.shetu66.com/2023/04/25/1682410853619598.png" alt="电影海报" class="movie-poster">
                <div class="movie-title">三体</div>
                <div class="movie-rating">★★★★★ 9.4</div>
            </div>
            <div class="movie-card">
                <img src="https://img.shetu66.com/2023/04/25/1682410853619598.png" alt="电影海报" class="movie-poster">
                <div class="movie-title">活着</div>
                <div class="movie-rating">★★★★★ 9.4</div>
            </div>
        </div>
    </div>

    <!-- 右侧边栏 -->
    <div class="sidebar">
        <div class="user-card">
            <img src="https://img.shetu66.com/2023/04/25/1682410853619598.png" alt="电影海报" class="movie-poster">
            <div>
                <div class="user-name">欢迎来到书影音世界</div>
                <div class="user-action">登录/注册</div>
            </div>
        </div>

        <h3 class="section-title">本周热门</h3>
        <ul class="side-list">
            <li><a href="#">《奥本海默》观影讨论</a></li>
            <li><a href="#">2023年度读书榜单</a></li>
            <li><a href="#">独立音乐人推荐</a></li>
            <li><a href="#">城市放映会报名</a></li>
            <li><a href="#">科幻小说创作大赛</a></li>
        </ul>

        <h3 class="section-title" style="margin-top: 20px;">发现小组</h3>
        <ul class="side-list">
            <li><a href="#">电影爱好者</a></li>
            <li><a href="#">读书会</a></li>
            <li><a href="#">黑胶唱片</a></li>
            <li><a href="#">文艺青年</a></li>
            <li><a href="#">摄影交流</a></li>
        </ul>
    </div>
</div>

<!-- 页脚 -->
<footer class="footer">
    <p>© 2023 书影音世界 - 发现好内容</p>
    <p>关于我们 · 帮助中心 · 联系我们 · 隐私政策</p>
</footer>

<script>
    // 简单的交互效果
    document.querySelectorAll('.movie-card').forEach(card => {
        card.addEventListener('click', function() {
            alert('即将跳转到详情页: ' + this.querySelector('.movie-title').innerText);
        });
    });
</script>
</body>
</html>
